<template>
  <view class="container">
    <bt-cropper ref="cropper" :fileType="'jpg'" :ratio="0" :imageSrc="tempImagePath" />
    <view class="footer">
      <view class="btn-1">
        <button shape="circle" type="warning" text="重新拍照" @click="close">重新拍照</button>
      </view>
      <view class="btn-2">
        <button shape="circle" type="primary" text="确定选择" @click="crop">确定选择</button>
      </view>
    </view>
  </view>
</template>

<script>
import btcropper from '../../components/bt-cropper/bt-cropper.vue'
export default {
  data() {
    return {
      isShow: false,
      zwpigai: false,
      tempImagePath: '',
    }
  },
  components: {
    btcropper,
  },
  onLoad(options) {
    if (options.item) {
      this.tempImagePath = options.item
    }
    if (options.zwitem) {
      this.tempImagePath = options.zwitem
      this.zwpigai = true
    }
  },
  methods: {
    // 打开回调函数方法
    open(tempImagePath) {
      this.isShow = true
      this.tempImagePath = tempImagePath
    },
    // 裁剪回调函数方法
    crop() {
      // 通过组件定义的ref调用cropper方法，返回一个promise对象
      this.$refs.cropper.crop().then((res) => {
        // let pages = getCurrentPages() //获取当前页面栈实例
        // let prevPage = pages[pages.length - 2] //获取上一页面栈实例，-3 == 上上一个页面栈实例
        // //返回上一页并传递所需当前页面栈参数
        // prevPage.$vm.getChildValue(
        //   JSON.stringify({
        //     tempFilePath: res,
        //   }),
        // )
        console.log(res, '这个这个是什么')
        if (this.zwpigai) {
          uni.navigateTo({
            url: '../../pagesA/zwresult/index?path=' + res,
          })
        } else {
          // 返回页面栈
          uni.navigateTo({
            url: '../../pagesA/result/index?path=' + res,
          })
        }
      })
    },
    // 重新拍照，关闭裁剪
    close() {
      this.isShow = false
      this.$emit('close')
      uni.navigateBack({
        delta: 1,
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  /** 外层一定要指定大小 */
  height: 100vh;
  z-index: 20;

  .footer {
    width: 100%;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    background: #000;
    display: flex;
    align-items: center;
    padding-top: 25rpx;
    padding-bottom: 50rpx;

    .btn-1,
    .btn-2 {
      width: 40%;
      margin: auto;
    }
  }
}
</style>
